<template>
    <div id="login">
        <div class="login-container">
            <el-card class="login-card" shadow="hover" style="opacity: 0.7">
                <h2 slot="header" class="login-title">菜先生</h2>
                <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="0px" @submit.native.prevent="login">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')" style="margin-left: 25px">登录</el-button>
                        <el-button type="primary" @click="register()" style="margin-left: 25px">注册</el-button>
                        <el-button @click="resetForm('loginForm')" style="margin-left: 25px">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: "张三",
                password: "123456",
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        }
    },
    methods:{
        // 登录
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //ajax请求
                this.$http.post("/login?username="+this.loginForm.username+"&password="+this.loginForm.password,).then(res=>{
                  if(res.data.code==200){
                      //将token保存到sessionStorage. 类似于cookie
                      sessionStorage.setItem("token",res.data.data)
                      //跳转到后台主页
                      this.$router.push("/home")
                  }
                })}
            });
        },

        // 重置按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 注册 
        register(){
            location.href="./register.jsp"
        }
    }

}
</script>

<style>
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url("https://qy174-fwx.oss-cn-beijing.aliyuncs.com/e4b95f5282bb4f66905293eb02d25709蔬菜2.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .login-card {
            width: 360px;
        }

        .login-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .el-radio{
            margin-left: 60px;
            margin-bottom: 20px;
        }
    </style>